import {
  Component,
  OnInit,
  ContentChildren,
  AfterContentInit,
  AfterViewInit,
  ViewChild,
  ElementRef,
  ViewChildren,
  QueryList,
  EventEmitter,
  Output,
  Input
} from '@angular/core';
import {CityService} from './city.service';

@Component({
  selector: 'city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.scss'],
  providers: [CityService]
})

export class CityComponent implements OnInit {
  provinces=[];
  defaultvalue =[];
  cityvalue1=[];
  _options=[{
      value: '120000',
      label: '天津市',
      children: [{
        value: '120100',
        label: 'Zhejiang',
        children: [{
          value: '120101',
          label: 'Zhejiang',
          isLeaf:true
        }]
      }]
  }]
  @Input() nzPlaceHolder = "Please select";
  @Input()
  set cityvalue(value) {
    console.log(value);
    console.log(this.defaultvalue);
    console.log(value.length>0&&this.defaultvalue.length==0)
    if (value.length>0&&this.defaultvalue.length==0 ) {
      this.loadDefault(value);
    }
    this.cityvalue1 = value;
  }
  get cityvalue(){ return this.cityvalue1; }
  @Output() cityvalueChange = new EventEmitter();
  constructor(private cityserver:CityService) {

  }
  ngOnInit() {
    console.log(this.cityvalue);
  }
  _console(value){
    this.cityvalue1=value;
    this.cityvalueChange.emit(value);
  }
  citylist={};
  scenicspots={};
  loadDefault(value){
    console.log('eeee');
    this.cityserver.getProvinceList().subscribe(res => {
        if (res.code==2000) {
          let arr=[];
          res.data.forEach(item=>{
            if (item.code==value[0] ) {
                arr.push({label:item.name,value:""+item.code});
                this.cityserver.getCityList(item.code).subscribe(res1 => {
                  if (res1.code===2000) {
                     res1.data.forEach(item1=>{
                         if (item1.code==value[1] ) {
                             arr.push({label:item1.name,value:""+item1.code});
                              this.cityserver.getRegionList(item1.code).subscribe(res2 => {
                                  if (res2.code==2000) {
                                      res2.data.forEach(item2=>{
                                          if (item2.code==value[2] ) {
                                            arr.push({label:item2.name,value:""+item2.code});
                                            this.defaultvalue=arr;
                                          }
                                      });
                                  }
                              })  
                         }
                     })
                  }
                })
            }
            
          });
          
        }
      });
  }
  /** load data async */
  loadData(e: {option: any, index: number, resolve: Function, reject: Function}): void {
    if (e.index === -1) {
      this.cityserver.getProvinceList().subscribe(res => {
        if (res.code==2000) {
          var provinces=res.data.map(item=>{
            return {value:item.code,label:item.name};
          });

          e.resolve(provinces);
        }
      });
      return;
    }

    const option = e.option;
    option.loading = true;
    if (e.index === 0) {
      if (this.citylist[option.value]) {
         e.resolve(this.citylist[option.value]);
      }else{
        this.cityserver.getCityList(option.value).subscribe(res => {
          if (res.code==2000) {
            option.loading = false;
            var citylist=res.data.map(item=>{
              return {value:item.code,label:item.name};
            });
            this.citylist[option.value]=citylist;
            e.resolve(citylist);
          }
        })
      }
      /*setTimeout(() => {
        option.loading = false;
        e.resolve(cities[option.value]);
      }, 1000);*/
    }
    if (e.index === 1) {
      if (this.scenicspots[option.value]) {
         e.resolve(this.scenicspots[option.value]);
      }else{
        this.cityserver.getRegionList(option.value).subscribe(res => {
          if (res.code==2000) {
            option.loading = false;
            var scenicspots=res.data.map(item=>{
              return {value:item.code,label:item.name,isLeaf: true};
            });
            this.scenicspots[option.value]=scenicspots;
            e.resolve(scenicspots);
          }
        });
      }
    }
  }
}
